<template>
  <div>
    <div class="card-box">
      <el-form label-position="top" label-width="120px" :model="state.formData">
        <el-form-item label="蛋糕名称" prop="name">
          <el-input v-model="state.formData.name" />
        </el-form-item>
        <el-form-item label="蛋糕图片" prop="img">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:9096/files/uploadFile"
            :show-file-list="false"
            name="multipartFile"
            :limit="1"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="state.formData.img" :src="state.formData.img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="蛋糕分类" prop="classifyId">
          <el-cascader
            style="width: 100%"
            @change="changeCity"
            v-model="state.formData.classifyId"
            :options="state.optionClassify1"
            clearable
          />
        </el-form-item>
        <el-form-item label="口味分类" prop="flavorId">
          <el-cascader
            style="width: 100%"
            @change="changeCity"
            v-model="state.formData.flavorId"
            :options="state.optionClassify2"
            clearable
          />
        </el-form-item>
        <el-form-item label="适合人群" prop="crowdId">
          <el-cascader
            style="width: 100%"
            @change="changeCity"
            v-model="state.formData.crowdId"
            :options="state.optionClassify3"
            clearable
          />
        </el-form-item>
        <el-form-item label="蛋糕价格" prop="price">
          <el-input v-model="state.formData.price" />
        </el-form-item>
        <el-form-item label="蛋糕库存" prop="store">
          <el-input v-model="state.formData.store" />
        </el-form-item>
        <el-form-item label="蛋糕尺寸" prop="size">
          <el-input v-model="state.formData.size" />
        </el-form-item>
        <el-form-item label="蛋糕描述" prop="describe">
          <el-input
            :rows="3"
            v-model="state.formData.describe"
            type="textarea"
            resize="none"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            v-if="!route.query.params"
            type="primary"
            style="width: 460px"
            @click="onSubmitForm"
            class="submit-btn"
            >确定新增</el-button
          >
          <el-button
            v-if="route.query.params"
            type="primary"
            style="width: 460px"
            @click="onUpdataSubmitForm"
            class="submit-btn"
            >确定修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  nextTick,
  onBeforeMount,
} from "vue";
import { UploadFilled, Plus, Back } from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus";

import request from "../../api/request";
import router from "../../router";
import { useRoute } from "vue-router";
import { syncRefs } from "@vueuse/shared";

const handleAvatarSuccess = (response, uploadFile) => {
  state.formData.img = response.data;
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 3) {
    ElMessage.error("Avatar picture size can not exceed 3MB!");
    return false;
  }
  return true;
};
const sematicDescription = ref("");
const formattedAddress = ref("");
const addressName = ref("");

const route = useRoute();

const defalutCity = ref([]);
const state = reactive({
  formData: {
    name: "",
    img: "",
    classifyId: "",
    flavorId: "",
    crowdId: "",
    price: "",
    store: "",
    size: "",
    describe: "",
  },
  optionClassify1: [],
  optionClassify2: [],
  optionClassify3: [],
});
const testObj = reactive({ testList: [] });
const testVisible = ref(false);
onMounted(() => {
  initData();
});

const initData = () => {
  let authentication = localStorage.getItem("adminInfo");
  if (!(authentication == 2)) {
    router.push("/admin/login");
    return;
  }
  if (route.query.params) {
    request.post("/cake/getOne", route.query.params).then((res) => {
      state.formData = res.data;
    });
  }
  request.get("/classify/listByValue").then((res) => {
    state.optionClassify1 = res.data;
  });
  request.get("/flavor/listByValue").then((res) => {
    state.optionClassify2 = res.data;
  });
  request.get("/crowd/listByValue").then((res) => {
    state.optionClassify3 = res.data;
  });
};
const importDataDialogVisible = ref(false);

const onSubmitForm = () => {
  let params = {
    name: state.formData.name,
    img: state.formData.img,
    classifyId: state.formData.classifyId[0],
    flavorId: state.formData.flavorId[0],
    crowdId: state.formData.crowdId[0],
    price: state.formData.price,
    store: state.formData.store,
    size: state.formData.size,
    cakeDescribe: state.formData.describe,
  };
  request.post("/cake/add", params).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "新增成功",
      });
      onBlack();
    }
  });
};
const onUpdataSubmitForm = () => {
  let params = {
    id: route.query.params,
    name: state.formData.name,
    img: state.formData.img,
    classifyId: state.formData.classifyId[0],
    flavorId: state.formData.flavorId[0],
    crowdId: state.formData.crowdId[0],
    price: state.formData.price,
    store: state.formData.store,
    size: state.formData.size,
    cakeDescribe: state.formData.describe,
  };
  request.post("/cake/update", params).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      onBlack();
    }
  });
};
const onBlack = () => {
  router.push("/admin/cakeManager");
};
</script>
<style lang="scss">
.card-box {
  width: 30%;
}
.demo-range .el-date-editor {
  margin: 8px;
}

.demo-range .el-range-separator {
  box-sizing: content-box;
}
.avatarImg {
  width: 100px;
  height: 100px;
  &:hover {
    cursor: pointer;
  }
}
.avatarImga {
  border: 1px dashed #ccc;
  line-height: 100px;
  text-align: center;
  width: 100px;
  height: 100px;
  &:hover {
    cursor: pointer;
  }
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
